<template>
    <div class="image-preview">
        <h2>游戏图片资源预览</h2>

        <!-- 加载状态 -->
        <div v-if="loading" class="loading">
            <p>正在加载图片资源...</p>
            <div class="progress">
                <div class="progress-bar" :style="{ width: progress + '%' }"></div>
            </div>
            <p>{{ loadedCount }} / {{ totalCount }}</p>
        </div>

        <!-- 图片资源展示 -->
        <div v-else class="image-grid">
            <!-- 角色立绘 -->
            <div class="category">
                <h3>角色立绘</h3>
                <div class="image-row">
                    <div v-for="key in characterKeys" :key="key" class="image-item">
                        <img :src="getImagePath(key)" :alt="getImageDescription(key)" />
                        <p>{{ getImageDescription(key) }}</p>
                        <small>{{ getImageDimensions(key) }}</small>
                    </div>
                </div>
            </div>

            <!-- 装备图标 -->
            <div class="category">
                <h3>装备图标</h3>
                <div class="image-row">
                    <div v-for="key in equipmentKeys" :key="key" class="image-item">
                        <img :src="getImagePath(key)" :alt="getImageDescription(key)" />
                        <p>{{ getImageDescription(key) }}</p>
                        <small>{{ getImageDimensions(key) }}</small>
                    </div>
                </div>
            </div>

            <!-- 敌人形象 -->
            <div class="category">
                <h3>敌人形象</h3>
                <div class="image-row">
                    <div v-for="key in enemyKeys" :key="key" class="image-item">
                        <img :src="getImagePath(key)" :alt="getImageDescription(key)" />
                        <p>{{ getImageDescription(key) }}</p>
                        <small>{{ getImageDimensions(key) }}</small>
                    </div>
                </div>
            </div>

            <!-- UI元素 -->
            <div class="category">
                <h3>UI元素</h3>
                <div class="image-row">
                    <div v-for="key in uiKeys" :key="key" class="image-item">
                        <img :src="getImagePath(key)" :alt="getImageDescription(key)" />
                        <p>{{ getImageDescription(key) }}</p>
                        <small>{{ getImageDimensions(key) }}</small>
                    </div>
                </div>
            </div>

            <!-- 地图瓦片 -->
            <div class="category">
                <h3>地图瓦片</h3>
                <div class="image-row">
                    <div v-for="key in tileKeys" :key="key" class="image-item">
                        <img :src="getImagePath(key)" :alt="getImageDescription(key)" />
                        <p>{{ getImageDescription(key) }}</p>
                        <small>{{ getImageDimensions(key) }}</small>
                    </div>
                </div>
            </div>

            <!-- 特效 -->
            <div class="category">
                <h3>特效</h3>
                <div class="image-row">
                    <div v-for="key in effectKeys" :key="key" class="image-item">
                        <img :src="getImagePath(key)" :alt="getImageDescription(key)" />
                        <p>{{ getImageDescription(key) }}</p>
                        <small>{{ getImageDimensions(key) }}</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="actions">
            <button @click="preloadImages" :disabled="loading">预加载所有图片</button>
            <button @click="clearCache">清除缓存</button>
            <button @click="refreshImages">刷新图片</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { imageManager, type ImageResource } from '../core/ImageManager';

// 响应式数据
const loading = ref(false);
const progress = ref(0);
const loadedCount = ref(0);
const totalCount = ref(0);

// 图片分类
const characterKeys = ['warrior', 'mage', 'rogue', 'priest'];
const equipmentKeys = ['sword', 'axe', 'staff', 'dagger', 'cloth-armor', 'leather-armor', 'plate-armor', 'magic-robe'];
const enemyKeys = ['skeleton', 'goblin', 'orc', 'dark-mage'];
const uiKeys = ['start-button', 'settings-button', 'back-button', 'health-icon', 'mana-icon', 'gold-icon', 'menu-background', 'game-background'];
const tileKeys = ['floor-tile', 'wall-tile', 'door-tile'];
const effectKeys = ['magic-effect', 'explosion-effect', 'heal-effect'];

// 获取图片路径
const getImagePath = (key: string): string => {
    const resource = imageManager.getImageResource(key);
    return resource?.path || '/assets/images/placeholder.svg';
};

// 获取图片描述
const getImageDescription = (key: string): string => {
    const resource = imageManager.getImageResource(key);
    return resource?.description || '未知图片';
};

// 获取图片尺寸
const getImageDimensions = (key: string): string => {
    const resource = imageManager.getImageResource(key);
    return resource ? `${resource.width} x ${resource.height}` : '未知尺寸';
};

// 预加载图片
const preloadImages = async () => {
    loading.value = true;
    progress.value = 0;
    loadedCount.value = 0;
    totalCount.value = imageManager.getAllImageKeys().length;

    try {
        await imageManager.preloadAllImages();
        loading.value = false;
        progress.value = 100;
        loadedCount.value = totalCount.value;
    } catch (error) {
        console.error('预加载图片失败:', error);
        loading.value = false;
    }
};

// 清除缓存
const clearCache = () => {
    imageManager.clearCache();
    console.log('图片缓存已清除');
};

// 刷新图片
const refreshImages = () => {
    clearCache();
    preloadImages();
};

// 组件挂载时预加载图片
onMounted(() => {
    preloadImages();
});
</script>

<style scoped>
.image-preview {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.loading {
    text-align: center;
    padding: 40px;
}

.progress {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 20px 0;
}

.progress-bar {
    height: 100%;
    background-color: #4CAF50;
    transition: width 0.3s ease;
}

.image-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.category h3 {
    color: #333;
    border-bottom: 2px solid #4CAF50;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.image-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.image-item {
    text-align: center;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    transition: transform 0.2s ease;
}

.image-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.image-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}

.image-item p {
    margin: 5px 0;
    font-weight: bold;
    color: #333;
}

.image-item small {
    color: #666;
    font-size: 12px;
}

.actions {
    margin-top: 30px;
    text-align: center;
}

.actions button {
    margin: 0 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.actions button:hover {
    background-color: #45a049;
}

.actions button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .image-row {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }

    .image-item {
        padding: 10px;
    }
}
</style>
